<template>
	<!-- <skeleton v-if="loading"></skeleton> -->
	<view >
		<u-swiper :list="banner" indicator keyName="img_url" showTitle :autoplay="true" circular></u-swiper>
		<u-sticky bgColor="#FFF">
			<view class="tabs">
				<u-tabs :list="sortList" @click="click"></u-tabs>
			</view>
		</u-sticky>

		<u-row class="u-flex-wrap u-p-l-8 u-p-r-8">
			<u-col span="6" v-for="(item,index) in goods" :key="index">
				<goodsCard :item="item"></goodsCard>
			</u-col> 
		</u-row>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				loading:true,
				params:{},//请求商品分类信息
				current:0, //分类参数默认索引值
				page:1,//数据加载的页数
				goods:[], //商品列表
				banner: [],//banner列表
				sortList: [{
						name: "默认"
					},
					{
						name: "推荐"
					},
					{
						name: "销量"
					}, {
						name: "最新"
					},
				]
			}
		},
		onShow() {
			//console.log('onShow');
		},
		onLoad() {
			_this = this;
			this.getData();
		},
		onReady() {
			//console.log('onReady');
		},
		methods: {
			click(e) {
				//console.log(e);
				this.current = e.index;
				//初始化处理
				this.params = {};
				this.page = 1;
				this.goods = [];
				this.getData();
			},
			async getData(){
				//调用接口（/api/index），请求数据
				//准备参数
				this.params = {
					page:_this.page					
				};
				if(this.current == 1){
					this.params.recommend = 1;
				}
				if(this.current == 2){
					this.params.sales = 1;
				}
				if(this.current == 3){
					this.params.new = 1;
				}
				let res = await uni.$u.http.get('/api/index',{
					params:{
						...this.params
					}
				})
				console.log(res);
				_this.goods = [..._this.goods,...res.goods.data]; //将新取到的数据追加到原来的数组中
				this.banner = res.slides;
			}
		},
		onReachBottom() {
			this.page++;
			this.getData();
		}
	}
</script>

<style scoped lang="scss">
	.tabs {
		display: flex;
		justify-content: center;
	}

	/deep/ .u-tabs__wrapper__nav__item__text {
		font-size: 16px;
	}

	/deep/ .u-row {
		flex-wrap: wrap;
	}

	.sort {
		font-size: 32rpx !important;
	}

	
</style>
